<script setup lang="ts">
import { ref, onMounted, watch, onBeforeUnmount } from 'vue'
import { ElMessage, ElMessageBox, ElLoading, type FormInstance, ElNotification } from 'element-plus'

import { queryPosCollectionData, autoQueryPosData, startCollectionData, queryScheduledData, getFuelBunkerScheduledCheck, updateFuelBunkerScheduledCheck, addFuelBunkerScheduledCheck, stopCollectionData } from '@/api'
import { type FuelBunkerDataDto } from '@/api/Bunker';

/** 数据 */
interface InState {
    /** 数据状态 */
    loading: boolean;
    /** 每个煤场加载状态 */
    loadingBunker: {
        [key: string]: boolean;
    };
    /** 进度背景色 */
    colors: Array<{
        color: string;
        percentage: number;
    }>;
}
const pageTabsNav = ['自动测量', '手动测量']
const pageTabsIndex = ref(0)
/** 数据 */
let state = ref<InState>({
    loading: false,
    loadingBunker: {},
    colors: [
        {
            color: "#f56c6c",
            percentage: 0
        },
        {
            color: "#e6a23c",
            percentage: 30
        },
        {
            color: "#1989fa",
            percentage: 60
        },
        {
            color: "#6f7ad3",
            percentage: 80
        },
    ]
})
function clickPageTabs(index: number) {
    pageTabsIndex.value = index
    if (index == 0) {
        getQueryScheduledData();
        clearInterval(autoQueryTimer.value);
    }
    else {
        getQueryPosCollectionData()
    }
}

const collectData = ref([
    {
        title: '1#煤场',
        percentage: 0,
        collectIndex: 0
    },
    {
        title: '2#煤场',
        percentage: 0,
        collectIndex: 0
    },
    {
        title: '3#煤场',
        percentage: 0,
        collectIndex: 0
    },
    {
        title: '4#煤场',
        percentage: 0,
        collectIndex: 0
    }
])
function clickCollectIng(index: number) {
    collectData.value[index].collectIndex = 1
    collectData.value[index].percentage = 0
    setInterval(() => {
        collectData.value[index].percentage += 10
        if (collectData.value[index].percentage > 100) {
            collectData.value[index].percentage = 100
            collectData.value[index].collectIndex = 2
        }
    }, 500)
}

const addDialogVisible = ref(false)
const addForm = ref<any>({
    bunkerId: 0,
    bunkerIds: [],
    executeTime: '',
    tagName: '',
    repeats: [],
    isActive: true,
    selfId: "00000000-0000-0000-0000-000000000000"
})

const coalIndex = ref(0)

function clickCoal(id: number) {
    if (addForm.value.bunkerIds.includes(id)) {
        addForm.value.bunkerIds = addForm.value.bunkerIds.filter((item: any) => item !== id);
    }
    else {
        addForm.value.bunkerIds.push(id)
    }

}

const weekData = ref<any>([
    {
        name: '每天',
        value: 'EveryDay',
        isDisabled: false,
        isChecked: false
    },
    {
        name: '每周一',
        value: 'Monday',
        isDisabled: false,
        isChecked: false
    },
    {
        name: '每周二',
        value: 'Tuesday',
        isDisabled: false,
        isChecked: false
    },
    {
        name: '每周三',
        value: 'Wednesday',
        isDisabled: false,
        isChecked: false
    },
    {
        name: '每周四',
        value: 'Thursday',
        isDisabled: false,
        isChecked: false
    },
    {
        name: '每周五',
        value: 'Friday',
        isDisabled: false,
        isChecked: false
    },
    {
        name: '每周六',
        value: 'Saturday',
        isDisabled: false,
        isChecked: false
    },
    {
        name: '每周日',
        value: 'Sunday',
        isDisabled: false,
        isChecked: false
    }
])

// 添加自动测试时间
const checkTimeIndex = ref(0)
function clickheckTimel(index: number) {
    checkTimeIndex.value = index
    if (index == 0) {
        addForm.value.repeats = []
    }
    else if (index == 1) {
        addForm.value.repeats = ['EveryDay']
    }
}

const changeWeek = (value: string[] | number[]) => {
    console.log(value)
    if (value.length == 0) {
        for (const i in weekData.value) {
            weekData.value[i].isDisabled = false
        }
    }
    else {
        if (value[0] == 'EveryDay') {
            for (const i in weekData.value) {
                if (weekData.value[i].value != 'EveryDay') {
                    weekData.value[i].isDisabled = true
                }
            }
        }
        else {
            for (const i in weekData.value) {
                if (weekData.value[i].value == 'EveryDay') {
                    weekData.value[i].isDisabled = true
                }
                else {
                    weekData.value[i].isDisabled = false
                }
            }
        }
    }
    if (value.length == 7) {
        console.log('7777777', addForm.value.repeats)
        addForm.value.repeats = ['EveryDay']
        if (addForm.value.repeats.includes('EveryDay')) {
            for (const i in weekData.value) {
                if (weekData.value[i].value == 'EveryDay') {
                    weekData.value[i].isDisabled = false
                }
                else {
                    weekData.value[i].isDisabled = true
                }
            }
        }
        else {
            for (const i in weekData.value) {
                if (weekData.value[i].value == 'EveryDay') {
                    weekData.value[i].isDisabled = true
                }
                else {
                    weekData.value[i].isDisabled = false
                }
            }
        }
    }

}

// const autoRefresh = ref(false)
/** 手动采集，煤场信息 */
let recordData = ref<FuelBunkerDataDto[]>([])
const getQueryPosCollectionData = () => {
    state.value.loading = true;
    queryPosCollectionData().then(res => {
        console.log('煤场采集信息类表----', res.data)
        recordData.value = res.data;
        if (recordData.value.some(item => item.inProgress)) {
            autoQuery();
        }
    }).finally(() => {
        state.value.loading = false;
    })
}
/** 定时器 */
const autoQueryTimer = ref<any>(null);
/** 定时刷新 */
const autoQuery = () => {
    autoQueryPosData().then(res => {
        console.log('自动查询煤场采集信息----', res.data)
        recordData.value = res.data
    }).finally(() => {
        const hasInProcess = recordData.value.some(item => item.inProgress);
        if (!hasInProcess) {
            autoQueryTimer.value = clearInterval(autoQueryTimer.value);
        } else if (!autoQueryTimer.value) {
            autoQueryTimer.value = setInterval(() => {
                autoQuery();
            }, 3000);
        }
    });
}

//开始采集 StartCollect
const StartCollect = (id: any) => {
    ElMessageBox.confirm(
        '是否马上开始采集？',
        '请确认',
        {
            confirmButtonText: '确 定',
            cancelButtonText: '取 消',
        }
    )
        .then(() => {
            state.value.loadingBunker[`${id}`] = true;
            startCollectionData(id).then((res: any) => {
                // console.log('删除----', res)
                if (res.code === 200) {
                    ElMessage({
                        type: 'success',
                        message: '操作成功',
                    })
                    autoQuery()
                }
                else {
                    ElMessage.error('操作失败，请重操作')
                }
            }).finally(() => {
                state.value.loadingBunker[`${id}`] = false;
            })
        })
}
/** 停止采集 */
function StopCollect(id?: number) {
    // const loading = this.$loading({
    //     lock: true,
    //     text: '正在状态重置中，请稍后...',
    //     spinner: 'el-icon-loading',
    //     background: 'rgba(0, 0, 0, 0.7)'
    // });
    if (!id?.toString()) {
        return;
    }
    let currentRow = { ...recordData.value.find(l => l.bunkerId === id) };

    currentRow.status = "0";
    currentRow.process = "0";
    currentRow.inProgress = false;
    stopCollectionData(id).then((res: any) => {
        if (res.code == 200) {
            ElNotification({
                title: "提醒",
                message: "操作成功",
                type: "success"
            })
        }
        // this.autoRefresh = false;
        autoQuery();
        // loading.close();
    });
}

// 自动测量-----------
let autoRecordData = ref<any>([])
const getQueryScheduledData = () => {
    queryScheduledData().then(res => {
        console.log('自动list----', res.data)
        autoRecordData.value = res.data
    })
}

const switchActiveStatus = (e: any, row: any, bunker: any) => {
    console.log(e)
    console.log('row---', row)
    console.log('bunker---', bunker)
    const statusText = ref('')

    if (e) {
        statusText.value = '是否开启自动测量？'
    }
    else {
        statusText.value = '是否关闭自动测量？'
    }
    ElMessageBox.confirm(
        statusText.value,
        '请确认',
        {
            confirmButtonText: '确 定',
            cancelButtonText: '取 消',
        }
    )
        .then(() => {
            const loading = ElLoading.service({
                lock: true,
                text: 'Loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            getFuelBunkerScheduledCheck(row.selfId).then((res: any) => {
                console.log('res', res)
                if (res.code == 200) {
                    if (row.isActive != res.data.isActive) {
                        const toUpdate = {
                            bunkerId: res.data.bunkerId,
                            selfId: res.data.selfId,
                            repeats: res.data.repeats,
                            executeTime: res.data.executeTime,
                            isActive: row.isActive,
                            tagName: row.tagName,
                            activeSwitch: true
                        };
                        updateFuelBunkerScheduledCheck(toUpdate).then((dd: any) => {
                            console.log('dd', dd)
                            if (dd.code == 200) {
                                ElMessage({
                                    type: 'success',
                                    message: '操作成功',
                                })
                                getQueryScheduledData();
                            } else {
                                ElMessage({
                                    type: 'success',
                                    message: '操作失败',
                                })
                            }
                        });
                    }
                }
                loading.close();
            });

        })
        .catch(() => {
            getQueryScheduledData()
        })
}

const submitForm = async (formEl: FormInstance | undefined) => {
    console.log(addForm.value)
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            ElMessageBox.confirm('新增当前的自动测量时间吗', '请确认', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            })
                .then(() => {
                    const loading = ElLoading.service({
                        lock: true,
                        text: 'Loading',
                        background: 'rgba(0, 0, 0, 0.7)',
                    })
                    const postData = ref({})
                    postData.value = {
                        bunkerIds: addForm.value.bunkerIds,
                        bunkerId: 0,
                        selfId: "00000000-0000-0000-0000-000000000000",
                        repeats: addForm.value.repeats,
                        executeTime: addForm.value.executeTime + ":00",
                        isActive: true,
                        tagName: addForm.value.tagName
                    }
                    addFuelBunkerScheduledCheck(postData.value).then((res: any) => {
                        console.log('add------', res)
                        loading.close();
                        if (res.code == 200) {
                            if (res.data && res.data.length > 0) {
                                let bunkers = ref<any>([]);
                                let invalid = ref<any>([]);
                                res.data.forEach((id: any) => {
                                    let matched = autoRecordData.value.find((l: any) => l.bunkerId === id.key);
                                    if (matched) {
                                        if (id.value === true) {
                                            bunkers.value.push(matched.bunkerName);
                                        } else {
                                            invalid.value.push(matched.bunkerName);
                                        }
                                    }
                                });
                                if (bunkers.value.length > 0) {
                                    let message = "您添加的时间与之前的设置项有重复(" + bunkers.value.join(",") + "),AI已自动帮您合并。";
                                    if (invalid.value.length > 0) {
                                        message = message + "<br />因同时间的其他更高优先级的计划已经存在(" + invalid.value.join(",") + ")，您的操作未生效。";
                                    }
                                    ElMessage({
                                        type: 'success',
                                        message: message,
                                        duration: 5000
                                    })
                                } else {
                                    if (invalid.value.length > 0) {
                                        let message = "因同时间的其他更高优先级的计划已经存在(" + invalid.value.join(",") + ")，您的操作未生效。";
                                        ElMessage({
                                            type: 'warning',
                                            message: message,
                                            duration: 5000
                                        })
                                    }
                                }
                            } else {
                                ElMessage.error(res.msg)
                            }
                            addDialogVisible.value = false
                            getQueryScheduledData()
                        }
                        else {
                            ElMessage.error(res.msg)
                        }
                    })
                })
                .catch(() => { })
        } else {
            console.log('error submit!', fields)
        }
    })

}

// 显示添加弹出框并初始化
const clickShowAdd = () => {
    resetForm(ruleFormRef.value)
    addForm.value = {
        bunkerId: 0,
        bunkerIds: [],
        executeTime: '',
        tagName: '',
        repeats: [],
        isActive: true,
        selfId: "00000000-0000-0000-0000-000000000000"
    }
    for (const i in weekData.value) {
        weekData.value[i].isDisabled = false
    }
    addDialogVisible.value = true
}

// switch 状态改变前的钩子
const beforeChangeSwitch = (row: any, bunkerName: any) => {
    console.log('item----', row)
    const statusText = row.isActive ? "要禁用" : "要启用";
    const currentSelected = row.executeTime.substring(0, 5) + " " + row.combinedText;

    return new Promise((resolve) => {
        ElMessageBox.confirm(
            '<p style="text-align: center;"> ' + statusText + ' ' + bunkerName + ' 上的<span style="display: block;color:rgb(30, 136, 243);">' + currentSelected + '</span>自动测量时间吗？</p>',
            '请确认', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true,
            dangerouslyUseHTMLString: true,
        })
            .then(() => {
                const loading = ElLoading.service({
                    lock: true,
                    text: 'Loading',
                    background: 'rgba(0, 0, 0, 0.7)',
                })
                getFuelBunkerScheduledCheck(row.selfId).then((res: any) => {
                    console.log('res', res)
                    if (res.code == 200) {
                        if (row.isActive != res.data.isActive) {
                            const toUpdate = {
                                bunkerId: res.data.bunkerId,
                                selfId: res.data.selfId,
                                repeats: res.data.repeats,
                                executeTime: res.data.executeTime,
                                isActive: row.isActive,
                                tagName: row.tagName,
                                activeSwitch: true
                            };
                            updateFuelBunkerScheduledCheck(toUpdate).then((resa: any) => {
                                console.log('resa', resa)
                                if (resa.code == 200) {
                                    ElMessage({
                                        type: 'success',
                                        message: '您的操作已完成。',
                                    })
                                    getQueryScheduledData();
                                } else {
                                    ElMessage.error(resa.msg)
                                }
                            });
                        } else {
                            row.isActive = !row.isActive;
                            ElMessage({
                                type: 'success',
                                message: '您的操作已完成。',
                            })
                        }
                    } else {
                        ElMessage.error(res.msg)
                    }
                    loading.close();
                });
                return resolve(true)

            })
            .catch(() => {
                return resolve(false)
            })

    })
}

// 编辑 弹出框 赋值
const isEdit = ref(false)
const editBunkerName = ref('')
const clickEdit = (item: any, name: any) => {
    //console.log(item.repeats.includes('EveryDay'))
    isEdit.value = true
    editBunkerName.value = name
    if (item.repeats.includes('EveryDay')) {
        for (const i in weekData.value) {
            if (weekData.value[i].value == 'EveryDay') {
                weekData.value[i].isDisabled = false
            }
            else {
                weekData.value[i].isDisabled = true
            }
        }
    }
    else {
        for (const i in weekData.value) {
            if (weekData.value[i].value == 'EveryDay') {
                weekData.value[i].isDisabled = true
            }
            else {
                weekData.value[i].isDisabled = false
            }
        }
    }
    addForm.value.bunkerId = item.bunkerId,
        addForm.value.executeTime = item.executeTime.substring(0, 5),
        addForm.value.tagName = item.tagName,
        addForm.value.repeats = item.repeats,
        addForm.value.isActive = item.isActive,
        addForm.value.selfId = item.selfId,
        addDialogVisible.value = true
}

const submitEditForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            ElMessageBox.confirm('修改当前的自动测量时间吗', '请确认', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            })
                .then(() => {
                    const loading = ElLoading.service({
                        lock: true,
                        text: 'Loading',
                        background: 'rgba(0, 0, 0, 0.7)',
                    })
                    const postData = ref({})
                    postData.value = {
                        bunkerId: addForm.value.bunkerId,
                        selfId: addForm.value.selfId,
                        repeats: addForm.value.repeats,
                        executeTime: addForm.value.executeTime + ":00",
                        isActive: true,
                        tagName: addForm.value.tagName
                    }

                    updateFuelBunkerScheduledCheck(postData.value).then((res: any) => {
                        if (res.code == 200) {
                            if (res.data && res.data.length > 0) {
                                const message = "您修改的时间与之前的设置项有重复(" + editBunkerName.value + "),AI已自动帮您合并。";
                                ElMessage({
                                    type: 'success',
                                    message: message,
                                    duration: 5000
                                })
                            } else {
                                ElMessage({
                                    type: 'success',
                                    message: res.msg,
                                    duration: 5000
                                })
                            }
                            addDialogVisible.value = false
                            isEdit.value = true
                            getQueryScheduledData()
                        } else {
                            ElMessage.error(res.msg)
                        }

                        loading.close();
                    }).catch(() => {
                        loading.close();
                    });
                })
                .catch(() => { })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const ruleFormRef = ref<FormInstance>()
const rules = ref<any>({
    bunkerId: [
        {
            required: true,
            message: '请选择',
            trigger: 'change',
        },
    ],
    bunkerIds: [
        {
            required: true,
            message: '请选择',
            trigger: 'change',
        },
    ],
    executeTime: [
        { required: true, message: '请选择', trigger: 'change' },
    ]
})
//resetForm(ruleFormRef)
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

onMounted(() => {
    getQueryScheduledData()


})
onBeforeUnmount(() => {
    clearInterval(autoQueryTimer.value);
})
</script>
<template>
    <!-- 弹出框/新增 -->
    <el-dialog v-model="addDialogVisible" :title="isEdit ? '编辑自动测量时间' : '新增自动测量时间'" width="580" :align-center="true" :show-close="true"
        @close="isEdit = false, addDialogVisible = false">
        <div class="dialog_main">
            <el-form ref="ruleFormRef" :rules="rules" :model="addForm" class="mt15" label-width="auto" label-position="left">
                <el-form-item label="配置煤场" :prop="isEdit ? 'bunkerId' : 'bunkerIds'">
                    <div class="device_tabs">
                        <ul v-if="!isEdit">
                            <li :class="addForm.bunkerIds.includes(item.bunkerId) ? 'hover' : ''" v-for="(item, index) in autoRecordData" :key="index"
                                @click="clickCoal(item.bunkerId)">
                                {{ item.bunkerName }}
                            </li>
                        </ul>
                        <ul v-if="isEdit">
                            <template v-for="(item, index) in autoRecordData" :key="index">
                                <li class="hover" v-if="addForm.bunkerId == item.bunkerId">
                                    {{ item.bunkerName }}
                                </li>
                            </template>
                        </ul>
                    </div>
                </el-form-item>
                <el-form-item label="测量时间" prop="executeTime">
                    <el-time-select v-model="addForm.executeTime" style="width: 220px" start="00:00" step="00:10" end="23:50" placeholder="请选择时间"
                        :editable="false" format="HH:mm" />
                </el-form-item>
                <el-form-item label="重复">
                    <div>
                        <!-- <ul class="check_time">
                            <li :class="checkTimeIndex == 0?'hover':''" @click="clickheckTimel(0)">永不</li>
                            <li :class="checkTimeIndex == 1?'hover':''" @click="clickheckTimel(1)">每天</li>
                        </ul> -->
                        <el-popover placement="right" :offset="60" :width="160" :hide-after="0">
                            <template #reference>
                                <el-checkbox-group v-model="addForm.repeats" @change="changeWeek">
                                    <div v-for="(item, index) in weekData" :key="index">
                                        <el-checkbox :label="item.name" :value="item.value" :disabled="item.isDisabled" :checked="item.isChecked">
                                            {{ item.name }}
                                        </el-checkbox>
                                    </div>
                                </el-checkbox-group>
                            </template>
                            <template #default>
                                <p><el-icon>
                                        <InfoFilled />
                                    </el-icon> 如果不勾选任何选项，则该计划只会运行一次</p>
                            </template>
                        </el-popover>
                    </div>
                </el-form-item>
                <el-form-item label="标签">
                    <el-input v-model="addForm.tagName" placeholder="请输入" style="width: 220px;" maxlength="10" show-word-limit />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button v-if="isEdit" type="primary" color="#2565C8" style="width: 130px;" @click="submitEditForm(ruleFormRef)">
                    确定
                </el-button>
                <el-button v-else type="primary" color="#2565C8" style="width: 130px;" @click="submitForm(ruleFormRef)">
                    确定
                </el-button>
                <el-button type="primary" color="#2565C8" style="width: 130px;" @click="isEdit = false, addDialogVisible = false">
                    取消
                </el-button>
            </div>
        </template>
    </el-dialog>

    <div class="flex_bg">
        <ul class="page_tabs">
            <li v-for="(item, index) in pageTabsNav" @click="clickPageTabs(index)" :class="pageTabsIndex == index ? 'hover' : ''">{{ item }}</li>
        </ul>

        <!-- 自动测量 -->
        <div class="measure" v-if="pageTabsIndex == 0">
            <div class="measure_item" v-for="(item, index) in autoRecordData" :key="index">
                <div class="measure_title">
                    <div class="name">{{ item.bunkerName }}</div>
                    <img @click="clickShowAdd" src="../../assets/img/ico_13.png" alt="">
                </div>
                <div class="auto_time">自动测量时间</div>
                <ul class="measure_time">
                    <li v-for="(itema, indexa) in item.scheduledChecks" :key="indexa">
                        <div class="name">{{ itema.executeTime.substring(0, 5) }}</div>
                        <p>{{ itema.combinedText }}</p>
                        <el-switch v-model="itema.isActive" style="--el-switch-on-color: #2565C8;"
                            :before-change="() => beforeChangeSwitch(itema, item.bunkerName)" />
                        <!-- @change="switchActiveStatus($event,itema,item)" -->

                        <div class="edit" @click="clickEdit(itema, item.bunkerName)">
                            <el-icon size="16">
                                <EditPen />
                            </el-icon>
                            <span>编辑</span>
                        </div>
                    </li>
                </ul>

                <div class="result">
                    <div class="result_title">
                        <img src="../../assets/img/ico_14.png" alt="">
                        最近5次自动测量结果
                    </div>
                    <ul class="result_list">
                        <li v-for="(itemb, indexb) in item.recentResults" :key="indexb">
                            <div class="info">
                                <strong v-if="itemb.status == 1" style="color:#F56C6C;">{{ itemb.statusText }}</strong>
                                <strong v-else-if="itemb.status == 2" style="color:#FAA735;">{{ itemb.statusText }}</strong>
                                <strong v-else-if="itemb.status == 3" style="color:#00B386;">{{ itemb.statusText }}</strong>
                                <strong v-else="itemb.status == 4" style="color:#F56C6C;">{{ itemb.statusText }}</strong>
                                <p>{{ itemb.executeTimeString }} {{ itemb.scheduleTime }}({{ itemb.scheduleText }})</p>
                            </div>
                            <!-- <el-button v-if="itemb.isDone" class="btn" color="#2565C8" round size="small">查看盘煤结果</el-button> -->
                            <RouterLink v-if="itemb.isDone" class="btn" :to="'/stock/record/info?eId=' + itemb.executeId">查看盘煤结果</RouterLink>
                        </li>
                        <!-- <li>
                        <div class="info">
                            <strong class="yellow">已完成</strong>
                            <p>2023-09-09  13:30:00（每晚盘煤）</p>
                        </div>
                    </li> -->
                    </ul>
                </div>

            </div>
        </div>

        <!-- 手动测量 -->
        <ul class="hand_measure" v-if="pageTabsIndex == 1" v-loading="state.loading">
            <li v-for="(item, index) in recordData" :key="index" v-loading="state.loadingBunker[`${item.bunkerId}`]">
                <h3>{{ item.bunkerName }}</h3>
                <div class="collect">
                    <img src="../../assets/img/bunkershow.jpg" width="100%" alt="">
                    <div v-if="item.inProgress">
                        <span>采集进行中，大约需要</span>
                        <span v-if="Number(item.process) <= 30">
                            2-3
                        </span>
                        <span v-else-if="Number(item.process) <= 60">
                            1-2
                        </span>
                        <span v-else-if="Number(item.process) <= 80">
                            1
                        </span>
                        <span v-else-if="Number(item.process) <= 100">
                            10-20
                        </span>
                        <span>
                            {{ Number(item.process) >= 81 ? "秒" : "分钟" }}
                        </span>
                    </div>
                    <!-- <p v-if="item.collectIndex == 2">已完成</p> -->
                    <div v-if="!item.inProgress && item.theLatestManuallyRunResult != null">
                        <RouterLink class="btn" :to="'/stock/record/info?eId=' + item.theLatestManuallyRunResult?.executeId">
                            查看盘煤结果
                        </RouterLink>
                    </div>
                </div>
                <div class="progress">
                    <el-progress v-if="item.inProgress" :text-inside="true" :stroke-width="16" :percentage="Number(item.process)" striped :duration="100"
                        :color="state.colors" />
                </div>
                <el-button v-if="item.inProgress" color="#2565C8" round size="large" style="width: 160px;" @click="StopCollect(item.bunkerId)">
                    停止采集
                </el-button>
                <el-button v-else color="#2565C8" round size="large" style="width: 160px;" @click="StartCollect(item.bunkerId)">
                    开始采集
                </el-button>
                <!-- <el-button v-if="item.collectIndex == 2" color="#2565C8" round size="large" style="width: 160px;" @click="clickCollectIng(index)" >再次采集</el-button> -->
            </li>

        </ul>

    </div>
</template>
<style scoped lang="scss">
.el-checkbox-button__inner {
    border: none;
    background: none;
}

.bunker_item {
    width: 100px;
    height: 32px;
    line-height: 30px;
    text-align: center;
    background: url('../../assets/img/ico_btn1.png') no-repeat;
    background-size: 100% 100%;
    font-weight: 400;
    font-size: 15px;
    color: #2565C8;
    cursor: pointer;
    border-radius: 20px;
    margin-right: 10px;

    &:hover {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    &.hover {
        background: url('./img/ico_btn1a.png') no-repeat;
        background-size: 100% 100%;
        color: #fff;
    }
}

.el-checkbox {
    --el-checkbox-checked-text-color: #2565C8;
    --el-checkbox-checked-input-border-color: #2565C8;
    --el-checkbox-checked-bg-color: #2565C8;
}

.check_time {
    display: flex;
    align-items: center;
    padding-bottom: 10px;

    li {
        width: 100px;
        background: #FFFFFF;
        border-radius: 4px;
        border: 1px solid #E0E5ED;
        font-size: 15px;
        color: #3B4552;
        line-height: 32px;
        text-align: center;
        margin-right: 10px;
        position: relative;
        cursor: pointer;

        &.hover {
            background: #EBF3FF url('../../assets/img/ico_dui.png') no-repeat right top;
            background-size: 20px auto;
            border: 1px solid #2565C8;
            color: #2565C8;
        }
    }
}

.hand_measure {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-bottom: 10px;

    li {
        width: 31.333%;
        background: #FFFFFF;
        box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
        border-radius: 10px;
        padding: 0 40px 20px;
        margin: 25px 1% 0;
        display: flex;
        flex-direction: column;
        align-items: center;

        .btn {
            display: block;
            width: 160px;
            line-height: 40px;
            text-align: center;
            color: #fff;
            background: #2565C8;
            font-size: 15px;
            padding: 0 15px;
            border-radius: 30px;
            margin-top: 15px;

            &:hover {
                opacity: 0.8;
            }
        }

        .progress {
            width: 100%;
            height: 80px;
            padding-top: 30px;
        }

        .collect {
            //border: 1px solid #ccc;
            position: relative;
            padding: 10px 30px;

            div {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                z-index: 9;
                background: rgba(0, 0, 0, 0.7);
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 500;
                font-size: 16px;
                line-height: 30px;
            }
        }

        h3 {
            font-weight: bold;
            font-size: 20px;
            color: #092A5F;
            line-height: 30px;
            padding: 15px 0;
        }
    }
}

.result {
    margin-top: 30px;
    background: linear-gradient(48deg, #FCFDFF 0%, #EFF7FD 100%);
    border-radius: 8px 8px 8px 8px;
    overflow: hidden;

    .result_list {
        padding: 0 20px;

        li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #eee;
            padding: 15px 0;

            &:last-child {
                border-bottom: none;
            }

            .btn {
                flex-shrink: 0;
                margin-left: 20px;
                color: #fff;
                background: #2565C8;
                font-size: 14px;
                line-height: 30px;
                padding: 0 15px;
                border-radius: 30px;
            }

            strong {
                display: block;
                font-weight: bold;
                font-size: 16px;
                line-height: 20px;
            }

            p {
                margin-top: 6px;
                font-size: 14px;
                color: #677581;
                line-height: 20px;
            }
        }
    }

    .result_title {
        width: 280px;
        height: 40px;
        background: linear-gradient(112deg, #CEE4FD 90%, #F1F8FD 10%);
        display: flex;
        align-items: center;
        padding: 0 20px;
        font-weight: 500;
        font-size: 17px;
        color: #2565C8;

        img {
            flex-shrink: 0;
            margin-right: 5px;
        }
    }
}

.measure {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: -1%;

    .measure_item {
        width: 32.333%;
        background: #FFFFFF;
        box-shadow: 3px 3px 8px 1px rgba(4, 50, 123, 0.16);
        border-radius: 10px;
        padding: 20px;
        margin: 20px 0 0 1%;

        .measure_time {
            padding-top: 5px;

            li {
                display: flex;
                align-items: center;
                justify-content: space-between;
                min-height: 60px;
                background: #FFFFFF;
                box-shadow: 0px 0px 5px 1px rgba(4, 50, 123, 0.16);
                border-radius: 8px 8px 8px 8px;
                padding: 10px 20px;
                margin-top: 10px;
                box-sizing: border-box;

                .name {
                    font-weight: bold;
                    font-size: 24px;
                    color: #3D4755;
                    line-height: 30px;
                    flex-shrink: 0;
                    width: 80px;
                    margin-right: 20px;
                }

                p {
                    width: 100%;
                    font-size: 15px;
                    color: #677581;
                    line-height: 20px;
                    padding-right: 20px;
                }

                .edit {
                    flex-shrink: 0;
                    margin-left: 15px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #2565C8;
                    cursor: pointer;

                    span {
                        padding-left: 5px;
                    }
                }
            }
        }

        .auto_time {
            font-weight: 500;
            font-size: 17px;
            color: #2565C8;
            line-height: 20px;
            margin-top: 10px;
        }

        .measure_title {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .name {
                font-weight: bold;
                font-size: 20px;
                color: #092A5F;
                line-height: 20px;
            }
        }
    }
}
</style>